import React, {Component} from 'react';
import './css/home.css'
import MD5 from 'crypto-js/md5'
import {HashRouter as Router, Route, Link} from 'react-router-dom';

import Axios from "axios";

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
        }

    }

    toInfo(id){
        this.props.history.push({path:"/info"+id})
    }

    componentWillMount() {
        if (localStorage.getItem('token') == JSON.stringify(MD5("admin123"))) {
            const {list} = this.state
            Axios.get('http://api.cat-shop.penkuoer.com/api/v1/products?per=100').then(result => {
                console.log(result.data.products)
                this.setState({
                    list: [...result.data.products]
                })
            })
        } else {
            this.props.history.push("/")
        }
    }

    componentWillUnmount() {

    }

    render() {
        const {list} = this.state
        const {isSow}=this.state
        console.log(list)
        const that=this
        return (
            <div className="index">
                <div className="header">
                    <div className="center">
                        <div className="left">
                            <span>商城首页</span>
                            <span className="islogin">Hi～欢迎来到Z商城, 请<a href="">登录</a></span> <span className="reg"><a
                            href="">免费注册</a></span>
                        </div>
                        <div className="right">
                            <ul className="nav">
                                <li><a href="">我的订单</a></li>
                                <li><a href="">买家中心</a></li>
                                <li><a href="">购物车0件</a></li>
                                <li><a href="">帮助中心</a></li>
                                <li><a href=""><img src="" alt=""/>手机商城</a></li>
                                <li><a href="">中关村在线</a></li>
                                <li><a href="">招商合作</a></li>
                                <li><a href="">联系客服</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="list">
                    <ul>
                        {list.map(function (item) {
                            return (
                                <li key={item._id} >
                                    <Link to={"/info/"+item._id}>
                                    <img src={/http/.test(item.coverImg)?item.coverImg:"http://api.cat-shop.penkuoer.com"+item.coverImg} alt=""/>
                                    <p>{item.name}</p>
                                    <p className="price">￥{item.price}</p>
                                    </Link>
                                 <button onClick={()=>alert("加入购物车成功")} className="addcar">加入购物车</button>
                                </li>
                            )
                        })}
                    </ul>
                </div>

            </div>
        );
    }
}

export default Home;
